<template>
  <div>
    <div class="gva-table-box">
      <div style="margin-bottom: 20px;">
        <!-- <el-select
          v-model="searchInfo.game_id"
          style="width: 18%;margin-right: 20px"
          placeholder="请选择游戏"
          clearable
        >
          <el-option
            v-for="item in gameIdsArr"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
        <!-- <el-date-picker
          v-if="isShowDate"
          v-model="date"
          style="margin-right: 20px;"
          type="date"
          placeholder="选择日期"
          @change="searchChange"
        /> -->
        <!-- <el-button
          type="primary"
          @click="search()"
        >
          查询
        </el-button> -->
        <el-input
          v-model="searchInfo.keyword"
          placeholder="请输入广告名称"
          style="width: 15%;margin-right: 20px;"
        />
        <el-cascader
          v-model="searchInfo.status"
          clearable
          style="width: 15%;margin-right: 20px;"
          :options="options"
        />
        <el-select
          v-model="hugeSelectColumn"
          multiple
          clearable
          filterable
          collapse-tags
          collapse-tags-tooltip
          :max-collapse-tags="3"
          placeholder="请选择列"
          style="width: 500px;margin-right: 20px;"
          @change="selectHugeColumn"
        >
          <el-option
            v-for="item in hugeColumns"
            :key="item.prop"
            :label="item.label"
            :value="item.prop"
          />
        </el-select>
        <el-button
          type="primary"
          @click="search()"
        >
          查询
        </el-button>
		<el-button
		  type="primary"
		  style="float: right;"
		  @click="createDialog = true"
		  v-if="projectInfo.origin.advertiser_id"
		>创建</el-button>
      </div>
      <el-divider />
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        row-key="ID"
        :data="hugeTableData"
        border
      >
        <el-table-column
          align="left"
          label="广告名称"
          width="350px"
          fixed="left"
        >
          <template #default="scope">
            <!-- <el-button
              link
              type="primary"
              @click="advertList(scope.row)"
            >
              {{ scope.row.name }}
            </el-button> -->
            {{ scope.row.promotion_name }}
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          label="广告ID"
          width="200px"
          prop="promotion_id"
          fixed="left"
        />
        <el-table-column
          v-for="(item,index) in temHugeSelectColumn"
          :key="index"
          :width="item.width"
          align="left"
          :label="item.label"
        >
          <template #default="scope">
            <span style="margin-right: 5px;">
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :total="total"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
	<el-drawer 
	  v-model="createDialog"
	  size="60%"
	  title="创建广告"
	  width="800"
	  style="z-index:0"
	><advertisementFormOceanengine ref="formRef" :projectInfo="projectInfo"></advertisementFormOceanengine>
	<template #footer>
	  <div class="dialog-footer">
	    <el-button @click="createDialog = false">取消</el-button>
	    <el-button
	      type="primary"
	      @click="formSubmit"
	    >
	      确认
	    </el-button>
	  </div>
	</template>
	</el-drawer>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getAccountData,
  getHugeInfo
} from '@/api/qmAccessTokens'
import { useRouter, useRoute } from 'vue-router'

import JSONBIG from 'json-bigint'
import { hu } from 'element-plus/es/locale'
import { Platform } from '@element-plus/icons-vue/dist/types'
import advertisementFormOceanengine from './components/advertisementFormOceanengine.vue'
const router = useRouter()

const createDialog = ref(false)

// =========== 表格控制部分 ===========

const hugeSelectColumn = ref([])

const temHugeSelectColumn = ref([])

const selectHugeColumn = () => {
  temHugeSelectColumn.value = []
  // 把选中的列加入到表格列中
  if (hugeSelectColumn.value.length > 0) {
    hugeSelectColumn.value.forEach(item => {
      hugeColumns.value.forEach(column => {
        if (item === column.prop) {
          temHugeSelectColumn.value.push(column)
        }
      })
    })
  } else {
    temHugeSelectColumn.value = hugeColumns.value
  }
}

const options = [
  {
    value: 'NOT_DELETED',
    label: '不限'
  },
  {
    value: 'PROMOTION_STATUS_ENABLE',
    label: '投放中'
  },
  {
    value: 'PROMOTION_STATUS_DISABLE',
    label: '未投放',
    children: [
      {
        label: '审核不通过',
        value: 'AUDIT_DENY'
      },
      {
        label: '新建审核中',
        value: 'AUDIT'
      },
      {
        label: '修改审核中',
        value: 'REAUDIT'
      },
      {
        label: '已暂停',
        value: 'DISABLED'
      },
      {
        label: '已暂停（配额达限）',
        value: 'DISABLE_BY_QUOTA'
      },
      {
        label: '项目已被暂停',
        value: 'PROJECT_DISABLED'
      },
      {
        label: '不在投放时段',
        value: 'NO_SCHEDULE'
      },
      {
        label: '未到达投放时间',
        value: 'TIME_NO_REACH'
      },
      {
        label: '账户余额不足',
        value: 'OFFLINE_BALANCE'
      },
      {
        label: '账户超出预算',
        value: 'BALANCE_OFFLINE_BUDGET'
      },
      {
        label: '项目超出预算',
        value: 'PROJECT_OFFLINE_BUDGET'
      },
      {
        label: '广告超出预算',
        value: 'PROMOTION_OFFLINE_BUDGET'
      },
      {
        label: '商品不可投',
        value: 'PRODUCT_OFFLINE'
      },
      {
        label: '关联抖音号不可投',
        value: 'AWEME_ACCOUNT_DISABLED'
      },
      {
        label: '关联直播间不可投',
        value: 'LIVE_ROOM_OFF'
      },
      {
        label: '关联抖音号可优化',
        value: 'AWEME_ACCOUNT_OPTIMIZABLE'
      },
      {
        label: '关联抖音视频可优化',
        value: 'AWEME_VIDEO_OPTIMIZABLE'
      },
      {
        label: '锚点不可投',
        value: 'AWEME_ANCHOR_DISABLED'
      },
      {
        label: '预算组超出预算',
        value: 'BUDGET_GROUP_OFFLINE_BUDGET'
      }
    ],
  },
  {
    value: 'FROZEN',
    label: '已终止'
  },
  {
    value: 'TIME_DONE',
    label: '已完成'
  },
  {
    value: 'DELETED',
    label: '已删除'
  },
  {
    value: 'ALL',
    label: '不限(包含已删除)'
  }
]

const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const hugeTableData = ref([])
// 格式化时间 北京时间
const isShowDate = ref(true)

const useRoutes = useRoute()

const advertiser_id = useRoutes.query.advertiser_id
const project_id = useRoutes.query.project_id

const searchInfo = ref({
  advertiser_id: advertiser_id,
  project_id: project_id,
  page: page.value,
  page_size: pageSize.value,
  keyword: '',
  status: undefined,
  platform_id: 1
})

const handleCurrentChange = (val) => {
  page.value = val
  searchInfo.value.page = val
  getHugeTableData()
}

const temHugeTableData = ref([])

const showData = ref(false)
// const changeShowData = (val) => {
//   showData.value = val
//   if (val) {
//     const arr = []
//     if (activeName.value == '1') {
//       hugeTableData.value.forEach(item => {
//         if (item.cost_today > 0) {
//           arr.push(item)
//         }
//       })
//       hugeTableData.value = arr
//     } else if (activeName.value == '3') {
//       kuaishouData.value.forEach(item => {
//         if (item.cost_today > 0) {
//           arr.push(item)
//         }
//       })
//       kuaishouData.value = arr
//     }
//   } else {
//     if (activeName.value == '1') {
//       hugeTableData.value = temHugeTableData.value
//     } else if (activeName.value == '3') {
//       kuaishouData.value = temKuaishouData.value
//     }
//   }
// }

// 查询
const getHugeTableData = function() {
  getHugeInfo({ params: JSON.stringify(searchInfo.value), type: 'advertiser' }).then(res => {
    if (res.code == 0) {
      hugeTableData.value = []
      temHugeTableData.value = []
      const info = JSONBIG.parse(res.data.info)
      total.value = info.PageInfo.total_number
      info.List.forEach(item => {
        const origin = JSONBIG.parse(item.origin)
        const extend = JSONBIG.parse(item.extend)
        const obj = {
          promotion_name: origin.promotion_name,
          promotion_id: origin.promotion_id,
          status: status.value[origin.status],
          status_first: status_first.value[origin.status_first],
          status_second: status_second.value[origin.status_second],
          budget: origin.budget,
          budget_mode: budgetMode.value[origin.budget_mode],
          position: position.value[origin.inventory_catalog],
          cpa_bid: origin.cpa_bid,
          learning_phase: studyList.value[origin.learning_phase],
          deep_cpabid: origin.deep_cpabid,
          roi_goal: origin.roi_goal,
        }

        basicInfo.value.forEach(basic => {
          if (basic.label.indexOf('率') > -1) {
            obj[basic.prop] = extend[basic.prop] + '%'
          } else {
            obj[basic.prop] = extend[basic.prop]
          }
        })

        hugeTableData.value.push(obj)
      })
    }
  })
}

const position = ref({
  'MANUAL': '首选媒体',
  'UNIVERSAL_SMART': '通投智选',
})

const studyList = ref({
  DEFAULT: '默认',
  LEARNING: '学习中',
  LEARNED: '学习成功',
  LEARN_FAILED: '学习失败',
})

const hugeColumns = ref([
  {
    label: '学习状态',
    prop: 'learning_phase',
    width: '150px'
  },
  {
    label: '广告状态',
    prop: 'status',
    width: '150px'
  },
  {
    label: '一级状态',
    prop: 'status_first',
    width: '150px'
  },
  {
    label: '二级状态',
    prop: 'status_second',
    width: '150px'
  },
  {
    label: '广告预算',
    prop: 'budget',
    width: '100px'
  },
  {
    label: '预算类型',
    prop: 'budget_mode',
    width: '100px'
  },
  {
    label: '广告出价',
    prop: 'cpa_bid',
    width: '100px'
  },
  // {
  //   label: '深度优化出价',
  //   prop: 'deep_cpabid',
  //   width: '150px'
  // },
  // {
  //   label: '深度转化ROI系数',
  //   prop: 'roi_goal',
  //   width: '150px'
  // },
  {
    'label': '消耗',
    'prop': 'stat_cost',
    width: '100px'
  },
  {
    'label': '曝光',
    'prop': 'show_cnt'
  },
  {
    'label': '千次曝光',
    'prop': 'cpm_platform',
    width: '100px'
  },
  {
    'label': '点击率',
    'prop': 'ctr'
  },
  {
    'label': '转化数',
    'prop': 'attribution_convert_cnt'
  },
  {
    'label': '转化成本',
    'prop': 'attribution_convert_cost',
    width: '100px'
  },
  {
    'label': '转化率',
    'prop': 'attribution_conversion_rate'
  },
  {
    'label': '激活数',
    'prop': 'active'
  },
  {
    'label': '激活成本',
    'prop': 'active_cost',
    width: '100px'
  },
  {
    'label': '激活率',
    'prop': 'active_rate',
    width: '150px'
  },
  {
    'label': '次留',
    'prop': 'attribution_next_day_open_rate'
  },
  {
    'label': '二留',
    'prop': 'attribution_retention_2d_rate'
  },
  {
    'label': '三留',
    'prop': 'attribution_retention_3d_rate'
  },
  {
    'label': '七留',
    'prop': 'attribution_retention_7d_rate'
  },
  {
    'label': '行为数',
    'prop': 'game_addiction',
    width: '100px'
  },
  {
    'label': '行为成本',
    'prop': 'game_addiction_cost',
    width: '100px'
  },
  {
    'label': '行为达成率',
    'prop': 'game_addiction_rate',
    width: '100px'
  },
  {
    'label': '当日LTV',
    'prop': 'attribution_micro_game_0d_ltv',
    width: '150px'
  },
  {
    'label': '三日LTV',
    'prop': 'attribution_micro_game_3d_ltv',
    width: '150px'
  },
  {
    'label': '七日LTV',
    'prop': 'attribution_micro_game_7d_ltv',
    width: '150px'
  },

  {
    'label': '当日ROI',
    'prop': 'attribution_micro_game_0d_roi',
    width: '150px'
  },
  {
    'label': '三日ROI',
    'prop': 'attribution_micro_game_3d_roi',
    width: '150px'
  },
  {
    'label': '七日ROI',
    'prop': 'attribution_micro_game_7d_roi',
    width: '150px'
  },

])

const setColumn = () => {
  temHugeSelectColumn.value = []
  hugeColumns.value.forEach(item => {
    temHugeSelectColumn.value.push(item)
  })
}

setColumn()

const basicInfo = ref(
  [
    {
      'label': '消耗',
      'prop': 'stat_cost'
    },
    {
      'label': '曝光',
      'prop': 'show_cnt'
    },
    {
      'label': '千次曝光',
      'prop': 'cpm_platform'
    },
    {
      'label': '点击率',
      'prop': 'ctr'
    },
    {
      'label': '转化数',
      'prop': 'attribution_convert_cnt'
    },
    {
      'label': '转化成本',
      'prop': 'attribution_convert_cost'
    },
    {
      'label': '转化率',
      'prop': 'attribution_conversion_rate'
    },
    {
      'label': '激活数',
      'prop': 'active'
    },
    {
      'label': '激活成本',
      'prop': 'active_cost'
    },
    {
      'label': '激活率',
      'prop': 'active_rate'
    },
    {
      'label': '次留',
      'prop': 'attribution_next_day_open_rate'
    },
    {
      'label': '二留',
      'prop': 'attribution_retention_2d_rate'
    },
    {
      'label': '三留',
      'prop': 'attribution_retention_3d_rate'
    },
    {
      'label': '七留',
      'prop': 'attribution_retention_7d_rate'
    },
    {
      'label': '行为数',
      'prop': 'game_addiction'
    },
    {
      'label': '行为成本',
      'prop': 'game_addiction_cost'
    },
    {
      'label': '行为达成率',
      'prop': 'game_addiction_rate'
    },
    {
      'label': '当日LTV',
      'prop': 'attribution_micro_game_0d_ltv'
    },
    {
      'label': '三日LTV',
      'prop': 'attribution_micro_game_3d_ltv'
    },
    {
      'label': '七日LTV',
      'prop': 'attribution_micro_game_7d_ltv'
    },

    {
      'label': '当日ROI',
      'prop': 'attribution_micro_game_0d_roi'
    },
    {
      'label': '三日ROI',
      'prop': 'attribution_micro_game_3d_roi'
    },
    {
      'label': '七日ROI',
      'prop': 'attribution_micro_game_7d_roi'
    },

  ]
)

const budgetMode = ref({
  'BUDGET_MODE_DAY': '按日预算',
  'BUDGET_MODE_TOTAL': '总预算',
})

const status = ref(
  {
    'OK': '投放中',
    'DELETED': '已删除',
    'PROJECT_OFFLINE_BUDGET': '项目超出预算',
    'PROJECT_PREOFFLINE_BUDGET': '项目接近预算',
    'TIME_NO_REACH': '未到达投放时间',
    'TIME_DONE': '已完成',
    'NO_SCHEDULE': '不在投放时段',
    'AUDIT': '新建审核中',
    'REAUDIT': '修改审核中',
    'FROZEN': '已终止',
    'AUDIT_DENY': '审核不通过',
    'OFFLINE_BUDGET': '广告超出预算',
    'OFFLINE_BALANCE': '账户余额不足',
    'PREOFFLINE_BUDGET': '广告接近预算',
    'DISABLED': '已暂停',
    'PROJECT_DISABLED': '已被项目暂停',
    'LIVE_ROOM_OFF': '关联直播间不可投',
    'PRODUCT_OFFLINE': '关联商品不可投',
    'AWEME_ACCOUNT_DISABLED': '关联抖音账号不可投',
    'AWEME_ANCHOR_DISABLED': '锚点不可投',
    'DISABLE_BY_QUOTA': '已暂停（配额达限）',
    'CREATE': '新建',
    'ADVERTISER_OFFLINE_BUDGET': '账号超出预算',
    'ADVERTISER_PREOFFLINE_BUDGET': '账号接近预算'
  }
)
const status_first = ref({
  'PROMOTION_STATUS_ENABLE': '投放中',
  'PROMOTION_STATUS_DISABLE': '未投放',
  'PROMOTION_STATUS_FROZEN': '已终止',
  'PROMOTION_STATUS_DONE': '已完成',
  'PROMOTION_STATUS_DELETED': '已删除',
})

const status_second = ref({
  'AUDIT_DENY': '审核不通过',
  'AUDIT': '新建审核中',
  'REAUDIT': '修改审核中',
  'DISABLED': '已暂停',
  'DISABLE_BY_QUOTA': '已暂停（配额达限）',
  'PROJECT_DISABLED': '项目已被暂停',
  'NO_SCHEDULE': '不在投放时段',
  'TIME_NO_REACH': '未到达投放时间',
  'OFFLINE_BALANCE': '账户余额不足',
  'BALANCE_OFFLINE_BUDGET': '账户超出预算',
  'PROJECT_OFFLINE_BUDGET': '项目超出预算',
  'PROMOTION_OFFLINE_BUDGET': '广告超出预算',
  'PRODUCT_OFFLINE': '商品不可投',
  'AWEME_ACCOUNT_DISABLED': '关联抖音号不可投',
  'LIVE_ROOM_OFF': '关联直播间不可投',
  'AWEME_ACCOUNT_OPTIMIZABLE': '关联抖音号可优化',
  'AWEME_VIDEO_OPTIMIZABLE': '关联抖音视频可优化',
  'AWEME_ANCHOR_DISABLED': '锚点不可投',
  'BUDGET_GROUP_OFFLINE_BUDGET': '预算组超出预算',
})

const search = () => {
  getHugeTableData()
}

getHugeTableData()

const formRef = ref(null);

const formSubmit = () => {
	formRef.value.submitForm()
}
const projectInfo = ref({extend:{},origin:{},external:[]})
const getProjectInfo = ()=>{
	getHugeInfo({ params: JSON.stringify({...searchInfo.value,ids:project_id}), type: 'project' }).then(res=>{
		projectInfo.value.extend = JSONBIG.parse(JSON.parse(res.data.info).List[0].extend)
		projectInfo.value.origin = JSONBIG.parse(JSON.parse(res.data.info).List[0].origin)
		getExternal(projectInfo.value.origin.advertiser_id.toString(),projectInfo.value.origin.micro_app_instance_id.toString())
	})
}
const getExternal = (advertiser_id,micro_app_instance_id)=>{
	if(!micro_app_instance_id){
		return
	}
	let params = {
		advertiserId:advertiser_id,
		platformId:1,
		instanceId:micro_app_instance_id,
	}
	getHugeInfo({ type: 'getExternal', params: JSON.stringify(params) }).then(res => {
		projectInfo.value.external = JSON.parse(res.data.info)
	})
}
getProjectInfo()
</script>
<style>
.el-col {
  text-align: center;
}
.el-overlay{
	z-index:100!important;
}
</style>
